<style>
    .city_pick .el-cascader--small {
        width: 314px;
        max-width: 300px;
    }
</style>
<template>
    <div class="city_pick">
        <el-cascader
                v-model="v"
                :options="options"
                @change="handleChange"></el-cascader>
    </div>

</template>
<script>
    //这里定义组件
    Rap.define('', [], {
        name: 'ly-city-picker',
        props: {
            value: {
                default: function () {
                    return {}
                }
            },
            fullText: String,
            level: {
                type:Number,
                default:3
            }
        },
        data: function () {
            return {
                options: [],
                v: [],
                data: {}
            }
        },
        methods: {
            handleChange: function () {
                this.$emit('input', this.v[this.level - 1]);
                var text='';
                if (this.level === 3) {
                     text = this.data.province_list[this.v[0]] + this.data.city_list[this.v[1]] + this.data.county_list[this.v[2]];
                } else if (this.level === 2) {
                     text = this.data.province_list[this.v[0]] + this.data.city_list[this.v[1]];
                } else{
                     text = this.data.province_list[this.v[0]];
                }
                this.$emit('update:fullText', text)
            }
        },
        created: function () {
            var me = this;
            axios.get('/' + Rap.history_base + '/ly/utils/area.json').then(function (rs) {
                me.data = rs.data;
                var province_list = rs.data.province_list;
                var city_list = rs.data.city_list;
                var county_list = rs.data.county_list;
                var citys = [];
                var province_index = {};
                var city_index = {};
                _.each(province_list, function (v, k) {
                    var item = {
                        value: k,
                        label: v
                    };
                    if (me.level > 1) {
                        item.children = [];
                    }
                    province_index[k] = item;
                    citys.push(item);
                });
                _.each(city_list, function (v, k) {
                    var parent_code = k.substr(0, 2) + "0000";
                    var item = {
                        value: k,
                        label: v
                    };
                    if (me.level === 3) {
                        item.children = [];
                    }
                    province_index[parent_code].children.push(item)
                    city_index[k] = item;
                });
                if (me.level === 3) {
                    _.each(county_list, function (v, k) {
                        var parent_code = k.substr(0, 4) + "00";
                        var item = {
                            value: k,
                            label: v
                        };
                        if (city_index[parent_code]) {
                            city_index[parent_code].children.push(item)
                        } else {
                            console.log('no ' + parent_code);
                        }

                    });
                }

                me.options = citys;
            });
        }
    })
</script>